<template>
    <div id="box">
        <div class="container">
            <tab>
                <span slot="title">本地音乐</span>
            </tab>
            <div class="list">
                <ul>
                    <songinfo :key="item._id" v-for="(item, index) in songList" :song="item" :data_index="index" :data_songList="songList">
                        <strong slot="songName">{{item.name}}</strong>
                        <span slot="singer">{{item.singer}}</span>
                    </songinfo>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import tab from '../components/Tab'
import songinfo from '../components/SongInfo'
import axios from 'axios'
axios.defaults.withCredentials = true;

export default {
    beforeMount() {
        axios.get('http://localhost:8080/visitor/song').then(res => {
            this.songList = res.data.data;
        })
    },
    data() {
        return {
            songList: []
        }
    },
    components: {
        tab,
        songinfo
    }
}
</script>

<style lang="scss" scoped>
    #box {
        .container {
            width: 1200px;
            min-height: calc(100vh - 300px);
            padding: 15px;
            margin: 0 auto;
            border: 1px solid #999;
            border-top: none;
            border-bottom: none;

            .list {
                padding: 20px 0 0 0;
            }
        }
    }
</style>